<template>
  <div>我是一个插槽组件</div>
  <div>
    <div>这里是默认插槽： <slot> </slot></div>
    <div>下面是具名插槽</div>
    <div>
      <slot name="introduce"></slot>
    </div>
  </div>

  <div>
    <div>作用域插槽</div>
    <div>
      <slot message="你好，我是默认名插槽"></slot>
      <hr />
      <slot message="hello world" name="title"></slot>
      <hr />
      <slot :user="userObj" name="userSlot"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const userObj = reactive({
  name: '张三',
  age: 18,
})
</script>

<style scoped></style>
